/* CSS Document */
@import "includes/variables";

/* Указываем box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
  max-width: 100%;
  display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
  margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
  font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
	width: 100%;
	height: 100%;
}

.content {
	display: flex;

	.error {
		display: flex;
		margin: 0 10%;
		flex-direction: column;

		.error-name {
			font-family: $title-font;
			font-size: 2em;
		}
		.error-message {
			font-family: $text-font;
		}
	}
}

.main-section {
	display: flex;
	width: 80%;
	height: 100%;
	margin: 0 10%;
	margin-top: 3%;

	.content-main {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.title-main {
		font-family: $title-font;
		font-size: 2.4em;
	}

	.text-main {
		font-family: $text-font;
		width: 70%;
	}
	.img-main-div {
      display: flex;
	  max-width: 100%;
    }

	.buttons-main {
		display: flex;
		flex-wrap: wrap;
        margin-top: 1.9%;

		div {
			margin-right: 10%;
			margin-top: 10px;
		}

		.button-main-join, .button-main-buy {

		}
	}

}

a{
  text-decoration: none;
  font-family: $text-font;
  position: relative;
  color: #4A4A4A;
  display: inline-block;
}


.btn-2{

  padding: 10px 20px;
  border: 3px solid $orange;
  transition: all 300ms ease;
  box-shadow: 0px 4px 10px 2px rgba(black, 0.2);


  &:before{
    position: absolute;
    content: '';
    width: 0%; height: 100%;
    background: $orange;
    top: 0;  left: auto; right: 0;
    z-index: -1;
    transition: all 300ms ease;
  }

  &:hover{
    color: white;
    box-shadow:none;
    &:before{
      position: absolute;
      content: '';
      width: 100%; height: 100%;
      background: $orange;
      top: 0; left: 0; right: 0;
      z-index: -1;
    }
  }
}

.sections-main {
	display: flex;
	flex-direction: column;
}

.for-background-second {
    display: flex;
	height: 100%;
	margin-top: 4%;

	.background-img-second {
		z-index: -9999;
		position: absolute;
		width: 100%;
		height: 75%;
	}
}

.main-section-second {
	display: flex;
	width: 80%;
	margin: 3% 10% 0;
	.content-second {
		display: flex;
		flex-direction: column;

		.title-second {
			font-family: $title-font;
			font-size: 2.4em;
		}

		.text-second {
			font-family: $text-font;
			width: 60%;
			margin-bottom: 2%;
		}

		.img-second {
			height: 600px;
			width: 100%;
		}
	}
}

.columns-second {
	display: flex;
	margin-top: 1%;

	.section {
		width: 30%;
	}

	.second-column-second, .third-column-second {
		margin-left: 5%;
	}

	.title {
		font-family: $title-font;
		font-size: 1.2em;
	}

	.text {
		font-family: $text-font;
		font-size: .9em;
	}

  .section {

  }
}

.market-second {
	margin-top: 20px;
}

.third-section {
	display: flex;
	flex-direction: column;
	width: 80%;
	margin-top: 4%;
	height: 100%;

	.method-icons-third {
		margin-left: 10%;
		justify-content: center;
		align-items: center;
		display: flex;
		height: 100%;
		width: 100%;
		.icon-pay-third {
			width: 60px;
			margin: 0 20px;
		}
	}

	.method_pay-third {
		font-family: $title-font;
		color: $gray-text-pay;
		margin-bottom: 1.5%;
		display: flex;
		width: 100%;
		justify-content: center;
		margin-left: 10%;
	}
}

.fourth-section {
  display: flex;
  flex-wrap: wrap;
	width: 80%;
	margin: 4% 0 0 10%;
  align-items: center;
	height: 100%;

  .fourth-content {
    display: flex;
    flex-direction: column;
    width: 30%;
  }

  .fourth-image {
    display: flex;
    width: 70%;
  }

  .pwa-fourth-little {
    color: $gray-text-pay;
    font-family: $title-font;
  }

  .pwa-fourth-title {
    font-family: $title-font;
    font-size: 2em;
  }

  .pwa-fourth-text {
    font-family: $text-font;
    margin-bottom: 5%;
  }

  .fourth-columns {
    display: flex;
    margin-top: 2%;

    .section {
  		width: 30%;
  	}

  	.second-fourth-column, .third-fourth-column {
  		margin-left: 5%;
  	}

    .icon {
      width: 15%;
    }

  	.title {
  		font-family: $title-font;
  		font-size: 1.2em;
  	}

  	.text {
  		font-family: $text-font;
  		font-size: .9em;
  	}
  }
}

.fifth-for-background-second {
  display: flex;
	height: 100%;
	margin-top: 4%;

	.fifth-background-img-second {
		z-index: -9999;
		position: absolute;
		width: 100%;
		height: 100%;
	}
}

.fifth-section {
  display: flex;
  width: 80%;
  margin: 4% 0 0 10%;
  align-items: center;
  height: 100%;

  .fifth-content {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin-left: 10%;

    .fifth-content-little {
      color: $gray-text-pay;
      font-family: $title-font;
    }

    .fifth-content-title {
      font-family: $title-font;
      font-size: 2em;
    }

    .fifth-content-text {
      font-family: $text-font;
      margin-bottom: 5%;
    }
  }
}

.sixth-section {
  display: flex;
  width: 50%;
  margin: 4% 0 0 10%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  padding: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 100%;
  justify-content: center;
  background: linear-gradient($grad-ind-f, $grad-ind-s);
  border-radius: 20px;

  .sixth-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;

    .sixth-title {
      font-family: $title-font;
      font-size: 2em;
    }

    .sixth-desc {
      font-family: $text-font;
      margin-bottom: 5%;
      font-size: 1.5em;
    }

    .sixth-more-link {
      background: linear-gradient(blue, aqua);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #0B2349;
      display: table;
      margin: 20px auto;
    }
  }
}

.seven-footer {
  display: flex;
  width: 80%;
  margin-top: 5%;
  margin-left: 2%;
  align-items: center;
  height: 100%;

  .seven-subscribe {
    display: flex;
    width: 100%;
    .seven-sub-cont {

      margin-right: 20%;
      .seven-sub-title {
        font-family: $title-font;
        font-size: 1.3em;
      }

      .seven-sub-desc {
        font-family: $text-font;
        margin-bottom: 5%;
      }
    }

    .seven-sub-form {
      display: flex;
      align-items: center;

      .seven-sub-input {
        input {
          width: 100%;
          padding: 12px 20px;
          margin: 8px 0;
          box-sizing: border-box;
          border: 3px solid #ccc;
          width: 100%;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          outline: none;
          margin-left: $all - 1px;
        }

        input:focus {
          border: 3px solid #555;
        }
      }

      .seven-sub-button {
        margin-left: $all + 0px;
        input {
          width: 100%;
          padding: 12px 20px;
          margin: 8px 0;
          box-sizing: border-box;
          border: 3px solid #ccc;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          outline: none;
        }

        input:hover {
          border: 3px solid #555;
        }
      }
    }
  }
}

.head {
	display: flex;
	margin: 0 10%;
	height: 100%;
	width: 80%;
	align-content: center;
	-webkit-align-items: center;
	-ms-align-items: center;
    font-family: $head-font;

	a {
		color: black;
		text-decoration: none;
	}

	.head-logo {
		font-size: 2em;
		flex-grow: 5;
	}

	.head-market {
		flex-grow: 10;
	}

	.head-login {
		flex-grow: 1;
	}
}
